<template>
    <div>
        <el-form v-loading="loading">
            <el-form-item v-for="(question,index) in paperData" :key="index" class="q">
                <p>{{question.name}}</p>
                <el-radio-group v-if="question.type in {'SINGLE_CHOICE':'','JUDGE':''}" v-model="answerList[index].answers">
                    <el-radio v-for="(option,index) in question.optionList" :key="index" :label="option.id">{{ option.content }}</el-radio>
                </el-radio-group>

                <el-checkbox-group v-if="question.type=='MULTIPE_CHOICE'" v-model="answerList[index].answers">
                    <el-checkbox
                    v-for="(option,index) in question.optionList"
                    :key="index"
                    :label="option.id"
                    :value="option.id">{{ option.content }}</el-checkbox>
                </el-checkbox-group>

                <p v-if="result_list[index]">
                    <span :style="{color:result_list[index].result?'':'red'}">{{result_list[index].result?'正确':'错误'}}</span>
                    {{ result_list[index].analysis }}
                </p>
            </el-form-item>
            <el-form-item>
                <el-button class="right" @click="$router.back()">返回</el-button>
                <el-button type="primary" class="right" @click="finlish_answer" v-show="finlish_btn">完成答题</el-button>
            </el-form-item>
        </el-form>
        <!-- <el-backup></el-backup> -->
    </div>
</template>
<script>
import { paper_stem, stem_answer } from "@/api/question_bank"
import { submit_answer } from "@/api/answer"
export default {
    name: "Answer",
    data() {
        return{
            loading: false,
            paperId:'',
            paperData:[],
            answerList:[],
            question_type: {
                SINGLE_CHOICE: "单选",
                JUDGE: "判断",
                MULTIPE_CHOICE: "多选",
            },
            result_list: [],
            wrong_question_ids: [],
            finlish_btn: true
        }
    },
    methods: {
        async finlish_answer(){
            for(let i=0;i<this.answerList.length;i++){
                if(typeof(this.answerList[i].answers) == 'string'){
                    this.answerList[i].answers = [this.answerList[i].answers]
                }
                await stem_answer(this.answerList[i])
                .then(res => {
                    this.result_list.push(res.data.data)
                })
                .catch(error => {
                    console.log(error)
                })
            }

            this.wrong_question_ids = []
            for(let i=0;i<this.result_list.length;i++){
                if(!this.result_list[i].result){
                    this.wrong_question_ids.push(this.paperData[i].id)
                }
            }
            submit_answer({
                paperId: this.paperId,
                wrongList: this.wrong_question_ids
            }).then(res => {
                this.finlish_btn = false
                console.log(res)
            }).catch(error => {
                console.log(error)
            })
        }
    },
    mounted(){
        this.loading = true;
        this.paperId = this.$route.params.paperId;
        paper_stem(this.paperId).then(res => {
            if(res.data.data.length === 0){
                this.$message("这是个空试卷")
                this.$router.back()
            }
            this.paperData = res.data.data
            // 初始化答题数组
            for(let i=0;i<this.paperData.length;i++){
                const answerItem = {
                    answers: [],
                    stemId: this.paperData[i].id
                }
                if(this.paperData[i].type == 'MULTIPE_CHOICE'){
                    answerItem['answers'] = []
                }else{
                    answerItem['answers'] = ''
                }
                this.answerList.push(answerItem)
            }
            this.loading = false
        }).catch(error => {
            console.log(error)
        })

    },
};
</script>
<style scoped>
.el-form-item.q {
    text-align: left;
    padding: 5px 20px;
    border-radius: 6px;
}
.el-button.right {
    margin: 0px 5px;
}
@media screen and (max-width: 768px){
    .el-form-item.q{
        box-shadow: none;
        padding: 0px;
        border-radius: 0px;
    }
}
</style>